<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Two grids JQ demo</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>

  <script src="https://cdn.jsdelivr.net/npm/gridstack@5.1.1/dist/gridstack-jq.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>Two grids demo (old v5.1.1 Jquery version)</h1>

    <div class="row">
      <div class="col-md-3">
        <div class="sidebar">
          <!-- will size to match content -->
          <div class="grid-stack-item">
            <div class="grid-stack-item-content">Drag me</div>
          </div>
          <!-- manually force a drop size of 2x1 -->
          <div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
            <div class="grid-stack-item-content">2x1, max=3</div>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="trash">
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 20px">
      <div class="col-md-6">
        <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
        <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
        <div class="grid-stack"></div>
      </div>
      <div class="col-md-6">
        <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: true</a>
        <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
        <div class="grid-stack"></div>
      </div>
    </div>
  </div>
  <script src="events.js"></script>
  <script type="text/javascript">
  let grids;
  $(function () { // testing $ works (delay loading here)
    let options = {
      column: 6,
      minRow: 1, // don't collapse when empty
      cellHeight: 70,
      float: false,
      // dragIn: '.sidebar .grid-stack-item', // add draggable to class
      // dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone
      removable: '.trash', // true or drag-out delete class
      acceptWidgets: function(el) { return true; } // function example, but can also be: true | false | '.someClass' value
    };
    let grids = GridStack.initAll(options);
    grids[1].float(true);

    // new 4.x static method instead of setting up options on every grid (never been per grid really) but old options still works
    GridStack.setupDragIn('.sidebar .grid-stack-item', { revert: 'invalid', scroll: false, appendTo: 'body', helper: myClone });
    // GridStack.setupDragIn(); // second call will now work (cache last values)

    let items = [
      {x: 0, y: 0, w: 2, h: 2},
      {x: 3, y: 1, h: 2},
      {x: 4, y: 1},
      {x: 2, y: 3, w: 3, maxW: 3, id: 'special', content: 'has maxW=3'},
      {x: 2, y: 5}
    ];

    grids.forEach(function (grid, i) {
      addEvents(grid, i);
      grid.load(items);
    });
  });

    // decide what the dropped item will be - for now just a clone but can be anything
    function myClone(event) {
      return event.target.cloneNode(true);
    }

    function toggleFloat(button, i) {
      grids[i].float(! grids[i].getFloat());
      button.innerHTML = 'float: ' + grids[i].getFloat();
    }

    function compact(i) {
      grids[i].compact();
    }
  </script>
</body>
</html>
